<template>
  <div class="mt-auto">
    <Pagination
      class="mt-4 flex justify-end"
      size="small"
      v-if="total > 0"
      :total="total"
      :pageSize="pageSize"
      :current="current"
      show-size-changer
      :pageSizeOptions="['10', '20', '30', '50']"
      show-quick-jumper
      @update:pageSize="handlePageSizeChange"
      @update:current="handlePageChange"
      @change="changeApi"
      :show-total="() => `共 ${total} 条`"
    />
  </div>
</template>

<script setup lang="tsx">
import { Pagination } from 'ant-design-vue';

const current = defineModel('current');
const pageSize = defineModel('pageSize');

const props = defineProps({
  total: {
    required: true,
    type: Number,
  },
  hidden: {
    type: Boolean,
    default: false,
  },
  changeApi: {
    type: Function,
    default: () => {},
  },
});
const emit = defineEmits(['update:current', 'update:pageSize']);

const handlePageSizeChange = (newPageSize: number) => {
  if (current.value * newPageSize > props.total) {
    current.value = 1;
  }
  emit('update:pageSize', newPageSize);
};

const handlePageChange = (newPage: number) => {
  emit('update:pageSize', pageSize.value);
  emit('update:current', newPage);
};
</script>
